.stellar.check-box
    input[type=radio]
        @include radius(all, 2px)
        @include border(all, 2px solid var(--theme))
        pointer-events: none
        width: 1rem
        height: 1rem
        margin-right: .5rem
        appearance: none
        position: relative
        vertical-align: -3px
        &[checked=true]
            &::before
                content: ""
                position: absolute
                display: block
                width: 100%
                height: 100%
                background: var(--theme)
                background-image: url("/img/checkbox/check.svg")
                background-size: cover

            &[symbol=check]::before
                background-image: url("/img/checkbox/check.svg")

            &[symbol=plus]::before
                background-image: url("/img/checkbox/plus.svg")

            &[symbol=minus]::before
                background-image: url("/img/checkbox/minus.svg")

            &[symbol=times]::before
                background-image: url("/img/checkbox/times.svg")